.items {
  @apply w-full;

  .loading {
    @apply h-5 w-full text-center;
  }

  .itemBox {
    @apply flex items-center justify-between h-10 mb-5;

    .itemsTab {
      @apply w-fit;

      .itemsTabItem {
        @apply cursor-pointer text-base leading-6 relative;
        margin-bottom: 1.625rem;

        &:first-child {
          @apply mr-10;
        }

        color: #ccc;
      }

      .itemsTabItemActive {
        @apply text-theme;

        &::before {
          @apply absolute left-2/4 w-5 bg-theme;
          content: '';
          bottom: -0.375rem;
          transform: translateX(-50%);
          height: 0.125rem;
        }
      }
    }

    .btnAdd {
      @apply text-base h-10 bg-transparent text-theme border border-solid;
      border-color: var(--theme-color);
      width: 7rem;

      &:hover {
        @apply bg-theme text-white;

        & > img {
          content: url('/images/add.png');
        }
      }

      & > img {
        @apply w-5 h-5;
        margin-right: 0.375rem;
      }
    }
  }

  .weeks {
    @apply text-2xl text-white mt-6;
  }
}

@media screen and (max-width: 767px) {
  .items {
    .itemBox {
      margin-top: -1.875rem;

      .itemText {
        @apply text-lg text-white;
        line-height: 1.125rem;
        font-family: PingFang SC;
      }

      @apply h-auto;
    }
  }

  .weeks {
    @apply text-lg;
    margin-top: 0rem !important;
  }
}
